import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';

import { h } from 'vue';

import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';

import { ElButton, ElImage } from 'element-plus';

import { useVbenForm } from './form';

setupVbenVxeTable({
	configVxeTable: (vxeUI) => {
		vxeUI.setConfig({
			grid: {
				align: 'center',
				border: false,
				columnConfig: {
					resizable: true,
				},
				minHeight: 180,
				formConfig: {
					// 全局禁用vxe-table的表单配置，使用formOptions
					enabled: false,
				},
				toolbarConfig: {
					custom: true,
					export: true,
					// import: true,
					refresh: true,
					zoom: true,
				},
				proxyConfig: {
					autoLoad: true,
					response: {
						result: 'items',
						total: 'total',
						list: 'items',
					},
					showActiveMsg: true,
					showResponseMsg: false,
				},
				round: true,
				showOverflow: true,
				size: 'small',
			} as VxeTableGridOptions,
		});

		// 表格配置项可以用 cellRender: { name: 'CellImage' },
		vxeUI.renderer.add('CellImage', {
			renderTableDefault(_renderOpts, params) {
				const { column, row } = params;
				const src = row[column.field];
				return h(ElImage, { src, previewSrcList: [src] });
			},
		});

		// 表格配置项可以用 cellRender: { name: 'CellLink' },
		vxeUI.renderer.add('CellLink', {
			renderTableDefault(renderOpts) {
				const { props } = renderOpts;
				return h(
					ElButton,
					{ size: 'small', link: true },
					{ default: () => props?.text },
				);
			},
		});

		// 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
		// vxeUI.formats.add
	},
	useVbenForm,
});

export { useVbenVxeGrid };

export type * from '@vben/plugins/vxe-table';